<template>
  <div class="container">
    <Split v-model="split1">
      <div slot="left" class="leftPanel">
        <map-container
          class="map-container"
          @viewHandle="viewHandle"
          :showxzqh="false"
        ></map-container>
      </div>
      <div slot="right" class="rightPanel">
        <keep-alive>
                    <!-- 1、因为是动态加载组件，所以设置v-if判断条件，当componentId赋值后再设置为true，去加载组件，避免子组件获取不到传递的props
          2、启用keep-alive后，子组件的mounted钩子函数只有在初次加载才能触发，之后的切换就不在触发，所以需要在子组件中需要使用activated和deactivated钩子函数。1.activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用 2.deactivated:组件被停用（离开路由）时调用 https://blog.csdn.net/zn740395858/article/details/90141539-->
          <component
            :is="componentId"
            :mapview="mapview"
            :paramObj="paramObj"
            v-if="isMapLoaded"
          ></component>
        </keep-alive>
      </div>
    </Split>
  </div>
</template>

<script>
import {Split } from "../../../components/Split/index";
import mapContainer from "../../../components/Map/mapContainer";
import dataPanel from "./dataPanel";
import addPanel from "./addPanel";
import editPanel from "./editPanel";
import detailPanel from "./detailPanel";
// import watermark from "watermark-dom";

export default {
  components: {
    Split,
    mapContainer,
    dataPanel,
    addPanel,
    editPanel,
    detailPanel,
  },
  provide() {
    return {
      toggleComponent: this.toggleComponent,
    };
  },
  data(){
    return {
      split1:0.6,
      isMapLoaded: false,
      componentId: "dataPanel",
      mapview: undefined,
      paramObj: {},
    }
  },
  // mounted() {
  //   watermark.load({
  //     watermark_id: 'wm_div_id',          //水印总体的id
  //     watermark_prefix: 'mask_div_id',    //小水印的id前缀
  //     watermark_txt: window.mapConfig.watermarkname+"参考数据  仅供预览请勿打印",             //水印的内容
  //     watermark_x: 20,                     //水印起始位置x轴坐标
  //     watermark_y: 20,                     //水印起始位置Y轴坐标
  //     watermark_rows: 2,                   //水印行数
  //     watermark_cols: 6,                   //水印列数
  //     watermark_x_space: 100,              //水印x轴间隔
  //     watermark_y_space: 50,               //水印y轴间隔
  //     watermark_font: '微软雅黑',           //水印字体
  //     watermark_color: 'black',            //水印字体颜色
  //     watermark_fontsize: '28px',          //水印字体大小
  //     watermark_alpha: 0.25,               //水印透明度，要求设置在大于等于0.005
  //     watermark_width: 240,                //水印宽度
  //     watermark_height: 200,               //水印长度
  //     watermark_angle: 30,                 //水印倾斜度数
  //     watermark_parent_width: 0,      //水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
  //     watermark_parent_height: 0,     //水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
  //     watermark_parent_node: null     //水印插件挂载的父元素element,不输入则默认挂在body上
  //   });
  // },
  methods: {
    toggleComponent(componentId, paramObj) {
      // this.isMapLoaded = true;

      this.isMapLoaded = false;
      // 在组件移除后，重新渲染组件
      // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
      this.$nextTick(() => {
        this.isMapLoaded = true;
        this.paramObj =
          paramObj == null || paramObj == undefined ? {} : paramObj;
        this.componentId = componentId;
      });
    },
    viewHandle: function (value) {
      console.log("mapview loaded");
      this.mapview = value;
      this.toggleComponent("dataPanel");
    },
  },
}
</script>

<style>
.container {
  height: calc(100vh - 60px);
}

.leftPanel {
  height: calc(100vh - 60px);
}

.rightPanel {
  height: calc(100vh - 60px);
  padding: 10px;
}
.map-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: calc(100vh - 60px);
}



</style>
